<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite App</title>
        <style>
            body.loading {
                background-size: 163px;
                font: 14px/21px Monaco, sans-serif;
                color: #999;
                -webkit-font-smoothing: antialiased;
                -webkit-text-size-adjust: 100%;
                -moz-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
                text-size-adjust: 100%;
                height: 100%;
                min-height: 100%;
                margin: 0px;
            }
            .loading .scene {
                position: fixed;
                top: 0;
                left: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                width: 100%;
                background: #222;
            }

            body.loading .loader {
                position: relative;
                width: 15em;
                height: 15em;
                background: linear-gradient(-225deg, #ff3cac9e 0%, #562b7c9e 52%, #2b86c59e 100%);
                border-radius: 50%;
                animation: spin 0.5s linear infinite;
            }

            body.loading span {
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: inherit;
                background: inherit;
            }

            body.loading span:nth-child(1) {
                filter: blur(5px);
            }

            body.loading span:nth-child(2) {
                filter: blur(10px);
            }

            body.loading span:nth-child(3) {
                filter: blur(25px);
            }

            body.loading span:nth-child(4) {
                filter: blur(50px);
            }

            body.loading span::after {
                position: absolute;
                content: "";
                top: 10px;
                left: 10px;
                right: 10px;
                bottom: 10px;
                background: #222;
                border-radius: inherit;
            }

            body.loading .text {
                position: absolute;
                opacity: 0;
                animation: breath 3s ease-in-out infinite;
            }

            @keyframes breath {
                from {
                    opacity: 0.05;
                }

                50% {
                    opacity: 1;
                }

                to {
                    opacity: 0.05;
                }
            }

            @keyframes spin {
                to {
                    transform: rotate(1turn);
                }
            }
        </style>
    </head>
    <body class="loading">
        <div id="app"></div>

        <div class="scene" id="loading">
            <div class="loader">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="text">正在准备资源中...</div>
        </div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>
